/*
* 子图布局封装 
**/

import G6 from "@antv/g6";
import { cloneDeep } from 'lodash';

/**
 * 矩阵布局
 *
 * @param graph
 * @param nodes
 * @param edges
 */
export const gridLayout = (graph, nodes, edges) => {
    // 动画分开，用grid子图布局
    const subGridLayout = new G6.Layout.grid({
        begin: [nodes[0].x, nodes[0].y],
        nodeSize: 40,
        condense: true,
        preventOverlap: true,
        preventOverlapPadding: 10,
        nodes: nodes,
        edges: edges,
    });
    // console.log(subGridLayout)
    subGridLayout.execute();
    // console.log(subGridLayout)
    graph.positionsAnimate();
}



export const dagreLayout = (graph) => {
    const width = graph.get('width')
    const height = graph.get('height')
    graph.updateLayout({
        type: 'dagre',
            /** 中心点坐标 */
        center: [width / 2, height / 2],
        /** 节点大小 */
        nodeSize: [40, 40],
        /**  节点水平间距(px) */
        nodesep: 12,
        /** 每一层节点之间间距 */
        ranksep: 50,
        /** 放置位置 */
        align: 'UL',
    });
}

/**
 * 水平布局 / 垂直布局
 * horizontal 水平
 * vertical 垂直
 */

export const directionLayout = (graph, nodes, edges, direction='horizontal') => {
    
    const conf = {
        begin: [nodes[0].x, nodes[0].y],
        nodeSize: 40,
        condense: true,
        preventOverlap: true,
        preventOverlapPadding: 10,
        nodes: nodes,
        edges: edges,
    }
    if(direction === 'horizontal'){
        Object.assign(conf, {rows: 1})
    }else if(direction === 'vertical'){
        Object.assign(conf, {cols: 1})
    }
    
    const layout = new G6.Layout.grid(conf);
    layout.execute();
    graph.positionsAnimate();

}
